<template>
	<div class="cart-container">
		<Radio :checked="selectedGoodsId.indexOf(goods.goods_id) > -1"
			@change=toggleRadio></Radio>
		<div class="cart-goods vertical">
			<img :src="goods.goods_pic">
			<div class="cart-info">
				<p class="ellipsis2L c-txt black">{{goods.goods_id}}</p>
				<p class="c-txt grey mt">{{goods.description}}</p>
				<p class="c-txt colored mt">￥{{goods.agent_price}}</p>
				<Bonus :bonus="goods.bonus"></Bonus>
				<NumEditor class="cart-num-editor" :num="goods.goods_num" :min="1" :max="goods.stores"
					@numMinus="numMinus" @numAdd="numAdd"></NumEditor>
			</div>
		</div>
	</div>
</template>
<script>
import { Indicator} from 'mint-ui'
import NumEditor from '@/components/NumEditor'
import Radio from '@/components/Radio'
import Bonus from '@/components/Bonus'
import { mapGetters, mapActions } from 'vuex'
export default{
	name:'CartItem',
	data(){
		return{
		}
	},
	computed:{
		...mapGetters({
			selectedGoodsId: 'cart/selectedGoodsId'
		}),
	},
	methods:{
		...mapActions({
			toggleSelect: 'cart/toggleSelect',
			editCartNum: 'cart/editCartNum'
		}),
		toggleRadio(checked){
			this.toggleSelect({goods: this.goods, isSelected: checked})
		},
		async numMinus(){
			Indicator.open()
			await this.editCartNum({goods_id: this.goods.goods_id, num: Number(this.goods.goods_num) - 1})
			Indicator.close()
		},
		async numAdd(){
			Indicator.open()
			await this.editCartNum({goods_id: this.goods.goods_id, num: Number(this.goods.goods_num) + 1})
			Indicator.close()
		},
	},
	watch:{
	},
	props: ['goods'],
	components: {NumEditor, Radio, Bonus}
}
</script>
<style lang='less' scoped>
.mt{
	margin-top: .05rem;
}
.cart-container{
	padding: .4rem .3rem 0;
	background: #fff;
}
.cart-goods{
	width: 8.5rem;
	margin-left: .3rem;
	img{
		width: 1.59rem;
		height: 1.59rem;
		vertical-align:top;
	}
	.cart-info{
		display: inline-block;
		width: 6.5rem;
		margin-left: .3rem;
		border-bottom: 1px solid #b5b5b5;
		padding-bottom: .2rem;
		position: relative;
		.colored{
			font-size: .4rem;
		}
		.cart-num-editor{
			position: absolute;
			right: 0rem;
			bottom: .3rem;
		}
	}
}
</style>